<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item prop="keywords">
          <el-input v-model="queryParams.keywords" placeholder="请输入关键字" clearable style="width: 200px" />
          <el-button type="primary" style="margin-left: 0; border-radius: 0" @click="handleQuery"> 搜索 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never">
      <template #header>
        <div class="justify-between">
          <el-button
            v-if="permissions.create"
            v-hasPerm="[`sys:guarantee_account:add`]"
            type="primary"
            @click="handelCreate"
          >
            创建银行保函账户
          </el-button>
        </div>
      </template>
      <el-table v-loading="loading" :data="tableList" highlight-current-row border @expand-change="handelExpandChange">
        <el-table-column type="expand" style="display: flex; margin: auto">
          <template #default="props">
            <el-table
              v-loading="expandLoading.get(props.row.id)"
              :data="expandData.get(props.row.id)"
              row-key="id"
              style="width: 80%; display: flex; margin: auto"
              align="center"
            >
              <el-table-column label="序号" :index="(index: number) => index + 1" />
              <el-table-column label="缴纳主体信息" prop="paymentName" min-width="120" />
              <el-table-column label="缴纳主体统一社会信用代码" prop="paymentCode" min-width="120" />
              <el-table-column label="项目编码" prop="projectNum" min-width="120" />
              <el-table-column label="项目名称" prop="projectName" min-width="120" />
              <el-table-column label="状态" prop="statusName" min-width="100" />
              <el-table-column label="银行保函函号" prop="guaranteeLetterNo" min-width="150" />
              <el-table-column label="银行保函担保金额" prop="paid" min-width="130" />
              <el-table-column label="缴存类型" prop="depositeTypeName" min-width="100" />
              <el-table-column label="已缴纳金额" prop="paid" min-width="100" />
              <el-table-column label="差异化缴存金额" prop="difference" min-width="100" />
              <el-table-column label="保函有效起始日期" prop="startDate" min-width="160" />
              <el-table-column label="保函有效终止日期" prop="endDate" min-width="160" />
              <el-table-column fixed="right" label="操作" align="center" min-width="150">
                <template #default="scope">
                  <el-button
                    v-if="permissions.audit && scope.row.status == 0"
                    v-hasData="scope.row.hasEdit"
                    v-hasPerm="[`sys:guarantee_payment:audit`]"
                    type="primary"
                    link
                    @click="handelAudit(scope.row)"
                    ><i-ep-edit />核实账户</el-button
                  >
                  <el-button type="primary" link> 查看附件 </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column key="code" label="账户编号" align="center" prop="code" min-width="170" />
        <el-table-column key="name" label="担保银行名称" align="center" prop="name" min-width="120" />
        <el-table-column key="bankName" label="开户银行" align="center" prop="bankName" min-width="120" />
        <el-table-column key="bankNo" label="开户银行账号" align="center" prop="bankNo" min-width="120" />
        <el-table-column
          key="socialcreditcode"
          label="担保银行统一信用代码"
          align="center"
          prop="socialcreditcode"
          min-width="120"
        />
        <el-table-column
          key="needCheckCount"
          label="待核实账户数量"
          min-width="120"
          align="center"
          prop="needCheckCount"
        >
          <template #default="scope">
            <el-text v-if="scope.row.needCheckCount == 0">{{ scope.row.needCheckCount }}</el-text>
            <el-text v-else type="danger">{{ scope.row.needCheckCount }}</el-text>
          </template>
        </el-table-column>
        <el-table-column key="creator" label="创建人" align="center" min-width="130" prop="creator" />
        <el-table-column key="createTime" label="创建时间" min-width="195" align="center" prop="createTime" />
        <el-table-column label="操作" fixed="right" max-width="260" min-width="160">
          <template #default="scope">
            <el-button
              v-if="permissions.update"
              v-hasPerm="[`sys:guarantee_account:update`]"
              link
              size="small"
              type="primary"
              @click="handelEdit(scope.row)"
            >
              修改
            </el-button>
            <el-button
              v-if="permissions.delete"
              v-hasPerm="[`sys:guarantee_account:delete`]"
              link
              size="small"
              type="primary"
              @click="handelDelete(scope.row)"
            >
              删除
            </el-button>
            <el-button link size="small" type="primary" @click="handelDownload(scope.row)"> 查看附件 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageIndex"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
    <add-form
      v-if="dialogAddOrEdit.visible"
      :dialog-add-or-edit="dialogAddOrEdit"
      @send-close="handleSendClose"
    ></add-form>
    <audit-form v-if="dialogAudit.visible" :dialog-audit="dialogAudit" @send-close="handleSendClose"></audit-form>
  </div>
</template>

<script lang="ts" setup>
import addForm from "./bankAdd.vue";
import auditForm from "../common/auditForm.vue";

import {
  QueryProjectGuaranteeAccount,
  GetProjectGuaranteePaymentsByAccountId,
  DeleteProjectGuaranteeAccount,
} from "@/api/guarantee/index";
import { QueryPaymentForm } from "@/api/guarantee/types";
import { downloadFile } from "@/utils";
import { downloadAttachment } from "@/api/common/other/index";

const permissions = ref({
  create: false,
  update: false,
  audit: false,
  delete: false,
});

const currentSystem = ref(localStorage.getItem("usertypeName"));
const isLumpContractor = ref(localStorage.getItem("isLumpContractor"));

if (currentSystem.value == "SysUser") {
  permissions.value.create = true;
  permissions.value.audit = true;
  permissions.value.delete = true;
}
if (currentSystem.value == "Manager") {
}
if (currentSystem.value == "Constructor" || currentSystem.value == "Commander" || currentSystem.value == "Corp") {
}

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const tableList = ref<any[]>();
const expandLoading = ref(new Map());
const expandData = ref(new Map());
const queryParams = reactive({
  pageIndex: 1,
  pageSize: 20,
  keywords: "",
  type: 4, //银行保险
});

const dialogAddOrEdit = reactive<DialogOption>({
  visible: false,
});
const dialogAudit = reactive<DialogOption>({
  visible: false,
});
//下载附件查看
const handelDownload = (row: any) => {
  if (row.attachments.length == 0) return ElMessage.warning("没有附件");
  row.attachments.forEach((item: any) => {
    downloadAttachment(item.attachmentId).then((response: any) => {
      downloadFile(response);
    });
  });
};
const handelCreate = () => {
  dialogAddOrEdit.visible = true;
  dialogAddOrEdit.title = "创建银行保函账户";
  dialogAddOrEdit.footBtn = "保存";
};
const handelEdit = (row: any) => {
  dialogAddOrEdit.visible = true;
  dialogAddOrEdit.id = row.id;
  dialogAddOrEdit.title = "修改银行保函账户";
  dialogAddOrEdit.footBtn = "保存";
};

//删除
const handelDelete = (row: any) => {
  ElMessageBox.confirm("确认删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      DeleteProjectGuaranteeAccount(row.id)
        .then((res) => {
          if (res.success === true) {
            handleQuery();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    })
    .catch();
};
const handelAudit = (row: any) => {
  dialogAudit.visible = true;
  dialogAudit.id = row.id;
  dialogAudit.title = "核实账户信息";
  dialogAudit.footBtn = "提交";
  dialogAudit.type = 4;
};

const handleSendClose = function (needRefresh: boolean) {
  dialogAddOrEdit.visible = false;
  dialogAddOrEdit.id = undefined;
  dialogAudit.visible = false;
  dialogAudit.id = undefined;
  if (needRefresh) {
    handleQuery();
  }
};

/**
 * 展开行改变事件
 * @param row
 * @param expandRows
 */
const handelExpandChange = function (row: any) {
  expandLoading.value.set(row.id, true);
  let form = reactive<QueryPaymentForm>({});
  form.GuaranteeAccountId = row.id;
  GetProjectGuaranteePaymentsByAccountId(row.id)
    .then((res) => {
      if (res.success === true) {
        expandData.value.set(row.id, res.data);
      }
    })
    .finally(() => {
      expandLoading.value.set(row.id, false);
    });
};

/* 列表查询 */
const handleQuery = async () => {
  loading.value = true;
  QueryProjectGuaranteeAccount(queryParams)
    .then((res) => {
      tableList.value = res.data.list;
      queryParams.pageIndex = res.data.pageNum;
      queryParams.pageSize = res.data.pageSize;
      total.value = res.data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  handleQuery();
});
</script>

<style lang="less" scoped>
:deep(.detail .el-dialog__body) {
  height: var(--mobileAddFormHeight);
  overflow-y: auto;
}
</style>
